<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单页面路由</title>
    <style>
        #box {
            width: 400px;
            height: 300px;
            border: 2px solid hotpink;
        }

        a {
            text-decoration: none;
            margin-left: 30px;
            font-size: 28px;
            font-weight: bold;
            /* color: black; */
        }

        li {
            font-size: 18px;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <div id="box">
        <a href="/video">视频</a>
        <a href="/stream">直播</a>
        <div class="content"></div>
    </div>
   
</body>

</html>
<script>
    var oA = document.querySelectorAll('a');
    for (let i = 0; i < oA.length; i++) {
        oA[i].onclick = () => {
            oA[i].style.Color = 'green';
        }
    }
    oA.forEach((item) => {
        item.onclick = function (e) {
            //        
            e.preventDefault();
            history.pushState({ title: '', url: '' }, '', this.href);

            switch (location.pathname) {
                case '/video': video_page(); break;
                case '/stream': stream_page(); break;
            }
        }
    })

    //渲染首页内容
    function video_page() {
        document.querySelector('.content').innerHTML = `
        <ul>
            <li>恋情曝光？李小璐带小鲜肉...</li>
            <li>陈萌晒孕肚破离婚传闻...</li>
            <li>赵本山徒弟的片酬，小沈阳...</li>
            <li>老公比自己大的女明星，刘诗诗...</li>
            <li>“十亿富婆”李冰冰,3000万豪宅...</li>
            <li>被老外退货的8位女星...</li>
        </ul>
        `
    }

    function stream_page() {
        document.querySelector('.content').innerHTML = `
            <ul>
                <li>直播|双十一全球快递“云监工”...</li>
                <li>慢直播|邂逅绝美云海日出...</li>
                <li>慢直播|天舟五号已到位，将于近日...</li>
                <li>慢直播|济南趵突泉——天下第一拳</li>
                <li>直播|立冬拥抱暖阳</li>
                <li>慢直播|邂逅绝美远海日出</li>
            </ul>`
    }
</script>